<template lang="pug">
.page-splash
  .header
  .hot-point.main(@click="handleEntry")
  .hot-point.sub.sub-1(@click="handleOpenURL('http://iot.gaoyuanyunguo.com:8084/octAdminVueFM')")
  .hot-point.sub.sub-2(@click="handleOpenURL('http://fumingzhongzhi.gaoyuanyunguo.com/ocAdminVueFM/#/login?redirect=%2Findex')")
  .hot-point.sub.sub-3(@click="handleOpenURL('http://fumingzhongzhi.gaoyuanyunguo.com/lydam/#/login?redirect=%2Findex')")
  .hot-point.sub.sub-4(@click="handleOpenURL('http://fumingzhongzhi.gaoyuanyunguo.com/ocAdminVueFM/#/login?redirect=%2Findex')")
  .hot-point-fs
    .hot-point.f(@click="handleOpenURL('https://nync.yn.gov.cn/html/weihuyemian/')")
    .hot-point.f(@click="handleOpenURL('https://nync.yn.gov.cn/html/weihuyemian/')")
    .hot-point.f(@click="handleOpenURL('https://nync.yn.gov.cn/html/weihuyemian/')")
    .hot-point.f(@click="handleOpenURL('https://nync.yn.gov.cn/html/weihuyemian/')")
    .hot-point.f(@click="handleOpenURL('https://nync.yn.gov.cn/html/weihuyemian/')")
    .hot-point.f(@click="handleOpenURL('https://nync.yn.gov.cn/html/weihuyemian/')")
    .hot-point.f(@click="handleOpenURL('https://nync.yn.gov.cn/html/weihuyemian/')")
    .hot-point.f(@click="handleOpenURL('https://nync.yn.gov.cn/html/weihuyemian/')")
</template>

<script>
export default {
  name: "index",
  methods: {
    handleEntry() {
      this.$router.replace({
        path: '/page1'
      })
    },
    handleOpenURL(url) {
      window.open(url);
    }
  }
}
</script>

<style lang="scss" scoped>
.page-splash{
  @extend %abs-full;
  background-image: url("~@/assets/images/splash.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  .header{
    background-image: url("~@/assets/images/splash-header.gif");
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: rem(150);
    z-index: 2;
  }
  .hot-point{
    //background-color: rgba(66, 185, 131, 0.5);
    position: absolute;
    cursor: pointer;
    pointer-events: auto;
    z-index: 9;
    &.main,
    &.sub{
      border-radius: rem(32 );
      box-shadow: 0 0 rem(0) rgba(255, 255, 255, 0);
      @include transition();
      transition: all .3s ease;
      //&:hover{
      //  box-shadow: 0 0 rem(20) rgba(255, 255, 255, .35);
      //}
    }
    &.main{
      left: rem(820);
      top: rem(370);
      width: rem(698);
      height: rem(354);
    }
    &.sub{
      width: rem(670);
      height: rem(160);
      &.sub-1{
        left: rem(118);
        top: rem(370);
      }
      &.sub-2{
        left: rem(1548);
        top: rem(370);
      }
      &.sub-3{
        left: rem(118);
        top: rem(560);
      }
      &.sub-4{
        left: rem(1548);
        top: rem(560);
      }
    }
  }
  .hot-point-fs{
    pointer-events: none;
    position: absolute;
    top: rem(1024);
    left: rem(116);
    width: rem(2096);
    display: flex;
    justify-content: space-between;
    .f{
      position: unset;
      width: rem(248);
      height: rem(80);
    }
  }
}
</style>
